<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag type="warning">{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>

			</div>
			<div
				id="pie-nest"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "QTHXT",
		data() {
			return {
				title: "当前显示： 嵌套环形图组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.drawLine();
			});
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById("pie-nest"));
				let option = {
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b}: {c} ({d}%)",
					},
					legend: {
						data: [
							"直达",
							"营销广告",
							"搜索引擎",
							"邮件营销",
							"联盟广告",
							"视频广告",
							"百度",
							"谷歌",
							"必应",
							"其他",
						],
					},
					series: [
						{
							name: "访问来源",
							type: "pie",
							selectedMode: "single",
							radius: [0, "30%"],
							label: {
								position: "inner",
								fontSize: 14,
							},
							labelLine: {
								show: false,
							},
							data: [
								{ value: 1548, name: "搜索引擎" },
								{ value: 775, name: "直达" },
								{ value: 679, name: "营销广告", selected: true },
							],
						},
						{
							name: "访问来源",
							type: "pie",
							radius: ["45%", "60%"],
							labelLine: {
								length: 30,
							},
							label: {
								formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
								backgroundColor: "#F6F8FC",
								borderColor: "#8C8D8E",
								borderWidth: 1,
								borderRadius: 4,

								rich: {
									a: {
										color: "#6E7079",
										lineHeight: 22,
										align: "center",
									},
									hr: {
										borderColor: "#8C8D8E",
										width: "100%",
										borderWidth: 1,
										height: 0,
									},
									b: {
										color: "#4C5058",
										fontSize: 14,
										fontWeight: "bold",
										lineHeight: 33,
									},
									per: {
										color: "#fff",
										backgroundColor: "#4C5058",
										padding: [3, 4],
										borderRadius: 4,
									},
								},
							},
							data: [
								{ value: 1048, name: "百度" },
								{ value: 335, name: "直达" },
								{ value: 310, name: "邮件营销" },
								{ value: 251, name: "谷歌" },
								{ value: 234, name: "联盟广告" },
								{ value: 147, name: "必应" },
								{ value: 135, name: "视频广告" },
								{ value: 102, name: "其他" },
							],
						},
					],
				};
				// 绘制图表
				myChart.setOption(option);
			},
		},
	};
</script>

<style lang="css" scoped>
</style>